<template>
	<view style="width: 100%;text-align: center;">

		<view class='search'>
			<view style="width: 15%;">
				<u-dropdown>
					<u-dropdown-item v-model="dropdownValue" title="图片源" :options="options1" @change='dropdown'>
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view style="width: 85%;">
				<u-search placeholder="输入关键字收索" shape="round" :clearabled="true" v-model="search" @custom='searchOK'
					@search='searchOK'></u-search>
			</view>
		</view>

		<getloading v-if='getloading'></getloading>
		<view class="content">
			<waterfallsFlow v-if="list.length > 0" @image-load='imageLoad' @wapper-lick='ThisWappe' @lower='lower'
				:list="list" imageSrcKey='image'>
				<!--  #ifdef  MP-WEIXIN -->
				<view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
					<view class="cnt">
						<!-- <view class="title">{{ item.title }}</view> -->
						<view class="text">{{ item.content }}</view>
					</view>
				</view>
				<!--  #endif -->

				<!-- #ifndef  MP-WEIXIN -->
				<template v-slot:default="item">
					<view class="cnt">
						<!-- <view class="title">{{ item.title }}</view> -->
						<view class="text">{{ item.content }}</view>
					</view>
				</template>
			</waterfallsFlow>
			<!-- #endif -->
		</view>
		<image v-if="endloading" class="endloading" src="@/static/Image/base-loaded.gif" mode=""></image>
	</view>
</template>

<script>
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	export default {
		data() {
			return {
				getloading: true,
				endloading: false,
				dropdownValue: 2,
				options1: [{
						label: 'unsplash',
						value: 2,
					},
					{
						label: 'pexels',
						value: 3,
					}
				],
			}
		},
		components: {
			waterfallsFlow
		},
		props: {
			list: {
				type: Array,
				default: []
			},
			search: {
				type: String,
				default: ''
			}
		},
		watch: {
			list: {
				handler(newName, oldName) {
					oldName && oldName.length && (this.endloading = false)
				},
				immediate: true,
				deep: true
			}
		},
		onLoad() {},
		mounted() {},
		onPageScroll(res) {},
		onHide() {},
		methods: {
			dropdown(d) {
				this.dropdownValue = d
				console.log(d);
			},
			ThisWappe(data) {
				console.log(data);
				this.showmaxImg(data)
			},
			showmaxImg(data) {
				uni.previewImage({
					urls: [data.image],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			imageLoad() {
				console.log('页面渲染完成');
				this.getloading = false
			},
			lower() {
				this.$emit('ReachBottom')
				this.endloading = true;
				console.log('lower111');
			},
			searchOK(e) {
				this.$emit('searchOK', e)
			},
		}
	}
</script>

<style scoped lang="scss">
	.endloading {
		width: 35%;
		height: 40rpx;
	}

	.search {
		// position: fixed; 
		width: 100%;
		// top: 0px;
		z-index: 9;
		background-color: #FFFFFF;
		display: flex;

		/deep/.u-dropdown__content {
			width: 100vw;
		}
	}

	.content {
		margin-top: 80rpx;
	}
</style>
